﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>算法</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="static/layui/css/layui.css">
  <link rel="stylesheet" href="static/layui/layui.js">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="static/layui-v2.5.4/layui/layui.js" charset="utf-8"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <style>
    body {
      font-family: "Lato", sans-serif;
    }

    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .sidenav a:hover,
    .offcanvas a:focus {
      color: #f1f1f1;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

    @media screen and (max-height: 450px) {
      .sidenav {
        padding-top: 15px;
      }

      .sidenav a {
        font-size: 18px;
      }
    }

    #div_wait {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 99;
      /* transform: translate(-50%, -50%); */
      display: none;
    }
  </style>

  <script>
    function openNav() {//打开侧边栏函数
      document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {//关闭侧边栏函数
      document.getElementById("mySidenav").style.width = "0";
    }

    // 训练新的SVM分类器
    function do_SVM() {
      // 获取用户此次填写的参数
      var svm_C = document.getElementById("svm_C").value;
      var svm_kernel = document.getElementById("svm_kernel").value;
      var svm_gamma = document.getElementById("svm_gamma").value;
      var show = document.getElementById("div_wait");
      if (confirm("开始训练吗？")) {
        $.ajax({
          type: "POST",
          url: "/build_svm.do",
          data: {
            'svm_C': svm_C,
            'svm_kernel': svm_kernel,
            'svm_gamma': svm_gamma
          },
          beforeSend: function () {
            show.style.display = "block";
          },
          success: function (res) {
            show.style.display = "none";
            alert("训练完成！");
            location.reload();
          },
          error: function () {
            show.style.display = "none";
            alert('出错了!')
          }
        });
      }
    }
    // 训练新的KNN分类器
    function do_KNN() {
      // 获取用户此次填写的参数
      var knn_n_neighbors = document.getElementById("knn_n_neighbors").value;
      var knn_weight = document.getElementById("knn_weight").value;
      var knn_algorithm = document.getElementById("knn_algorithm").value;
      var show = document.getElementById("div_wait");
      if (confirm("开始训练吗？")) {
        $.ajax({
          type: "POST",
          url: "/build_knn.do",
          data: {
            'knn_n_neighbors': knn_n_neighbors,
            'knn_weight': knn_weight,
            'knn_algorithm': knn_algorithm
          },
          beforeSend: function () {
            show.style.display = "block";
          },
          success: function (res) {
            alert("训练完成！");
            show.style.display = "none";
            location.reload();
          },
          error: function () {
            alert('出错了!');
            show.style.display = "none";
          }
        });
      }
    }
    // 训练新的随机森林分类器
    function do_RF() {
      // 获取用户此次填写的参数
      var rf_criterion = document.getElementById("rf_criterion").value;
      var rf_max_depth = document.getElementById("rf_max_depth").value;
      var rf_min_samples_leaf = document.getElementById("rf_min_samples_leaf").value;
      var show = document.getElementById("div_wait");
      if (confirm("开始训练吗？")) {
        $.ajax({
          type: "POST",
          url: "/build_rf.do",
          data: {
            'rf_criterion': rf_criterion,
            'rf_max_depth': rf_max_depth,
            'rf_min_samples_leaf': rf_min_samples_leaf
          },
          beforeSend: function () {
            show.style.display = "block";
          },
          success: function (res) {
            show.style.display = "none";
            alert("训练完成！");
            location.reload();
          },
          error: function () {
            show.style.display = "none";
            alert('出错了!')
          }
        });
      }
    }
  </script>
</head>

<body style="background-image: url(static/common/image/bg2.jpg);background-size: 100%">
  <!--导航栏-->
  <nav class="navbar navbar-expand-sm  navbar-dark " style="height:10%;background-color: #2C3D59">
    <span class="text-white ml-4" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 菜单栏</span>
    <h2 class=" font-weight-bold ml-5" style="color:#FFFFFF;padding-left:360px">旗袍识别系统</h2>
    <div style="padding-left: 400px">
      <div class="dropdown">
        <!--下拉菜单-->
        <a class="text-white dropdown-toggle" data-toggle="dropdown">
          <img
            style="height: 24px;width: 24px;-webkit-border-radius:12px;-moz-border-radius:12px;background-color:#FFFFFF"
            src="static/common/image/user.png">&nbsp;
          {% if username == none %}
          未登录
          {% else %}
          <span>{{username}}</span>
          {% endif %}
        </a>
        <div class="dropdown-menu small">
          <a class="dropdown-item" href="/logout.do">
            <img style="height: 20px;width: 20px;border-left:1px #00FF66" src="static/common/image/poweroff.png">退出
          </a>
        </div>
      </div>
    </div>
  </nav>

  <!--左侧目录-->
  <div class="container-fluid">
    <div class="row">
      <!--侧边栏-->
      <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a class="nav-link ml-5 mt-4" href="/crawlerPage">爬虫</a>
        <a class="nav-link ml-5 mt-4" href="/labelPage">标注</a>
        <a class="nav-link ml-5 mt-4" href="/classifyPage">分类</a>
        <a class="nav-link ml-5 mt-4" href="/algorithmPage">算法</a>
      </div>

      <div class="col-sm-10">
        <div class="mt-2" style="height: 90%;width: 80%;margin-left:40%;">
          <!-- 这里是主模板 -->

          <ul class="nav nva-tabs mt-3 mb-3" role="tablist">
            <li class="nav-item">
              <button class="nav-link active btn btn-info" data-toggle="tab" href="#Algo1">SVM</button>
            </li>
            <li class="nav-item" style="margin-left: 10%">
              <button class="nav-link btn btn-info" data-toggle="tab" href="#Algo2">KNN</button>
            </li>
            <li class="nav-item " style="margin-left: 10%">
              <button class="nav-link btn btn-info" data-toggle="tab" href="#Algo3">RandomForest</button>
            </li>

            <li class="nav-item">

            </li>
          </ul>

          <div class="tab-content mt-1">
            <div id="Algo1" class="container tab-pane active ">
              <h3 class="mt-2 font-weight-bold ">支持向量机SVM</h3>
              <p class="text-primary font-weight-bold mt-2" style="font-size: 20px">当前SVM算法的参数设置</p>
              <p class="mt-2" style="font-size: 18px">C（惩罚系数）：{{svm.C}}</p>
              <p style="font-size: 18px">kernel（核函数）：{{svm.rbf}}</p>
              <p style="font-size: 18px">gamma（核函数系数）：{{svm.gamma}}</p>
              <p style="font-size: 18px">训练图片张数：{{svm.train_num}}</p>
             <!-- <p style="font-size: 18px">训练时间：{{svm.train_time}}</p>
              <p style="font-size: 18px">测试时间：{{svm.test_time}}</p>
		-->
              <p style="font-size: 18px">测试正确率：{{svm.rate}} （{{svm.correct}} / {{svm.total}}）</p>
              <p class="text-primary font-weight-bold mt-2" style="font-size: 20px">设置本次训练所用的参数</p>
              <div class="mt-2" style="margin-right: 45%; font-size: 18px">C:<input class="form-control" id="svm_C"
                  value={{svm.C}}></div>
              <div style="font-size: 18px">kernel:
                <select class="form-control" id="svm_kernel" style="width: 470px">
                  <option value="rbf">RBF（高斯核函数）</option>
                  <option value="linear">Linear（线性核函数）</option>
                  <option value="poly">Poly（多项式核）</option>
                  <option value="sigmoid">Sigmoid（tanh函数核）</option>
                </select>
              </div>
              <div style="margin-right: 45%;font-size: 18px">gamma:<input class="form-control" id="svm_gamma"
                  value={{svm.gamma}}></div>
              <button class="btn btn-success mt-2" onclick="do_SVM()">开始训练</button>
            </div>
            <div id="Algo2" class="container tab-pane fade ">
              <h3 class="mt-2 font-weight-bold ">K近邻-KNN</h3>
              <p class="text-primary font-weight-bold mt-2" style="font-size: 20px">当前KNN算法的参数设置</p>
              <p class="mt-2" style="font-size: 18px">n_neighbors（K近邻的'K'）：{{knn.n_neighbors}}</p>
              <p style="font-size: 18px">weight（给相近的点设置的权重）：{{knn.weight}}</p>
              <p style="font-size: 18px">algorithm（选择的算法）：{{knn.algorithm}}</p>
              <p style="font-size: 18px">训练图片张数：{{knn.train_num}}</p>
		<!--
              <p style="font-size: 18px">训练时间：{{knn.train_time}}</p>
              <p style="font-size: 18px">测试时间：{{knn.test_time}}</p>
		-->
              <p style="font-size: 18px">测试正确率：{{knn.rate}} （{{knn.correct}} / {{knn.total}}）</p>
              <p class="text-primary font-weight-bold mt-2" style="font-size: 20px">设置本次训练所用的参数</p>
              <div class="mt-2" style="margin-right: 45%; font-size: 18px">n_neighbors:<input class="form-control"
                  id="knn_n_neighbors" value={{knn.n_neighbors}}></div>
              <div style="font-size: 18px">
                weight:
                <select class="form-control" id="knn_weight" style="width: 470px">
                  <option value="uniform">Uniform（统一权重）</option>
                  <option value="distance">Distance（差异权重）</option>
                </select>
              </div>
              <div style="margin-right: 45%;font-size: 18px">
                algorithm:
                <select class="form-control" id="knn_algorithm" style="width: 470px">
                  <option value="brute">Brute（暴力搜索）</option>
                  <option value="kd_tree">KD_Tree（KD树）</option>
                  <option value="ball_tree">Ball_Tree（球树）</option>
                  <option value="auto">Auto（自动选择最快的）</option>
                </select>
              </div>
              <button class="btn btn-success mt-2" onclick="do_KNN()">开始训练</button>
            </div>
            <div id="Algo3" class=" container tab-pane fade">
              <h3 class="mt-2 font-weight-bold ">随机森林-RandomForest</h3>
              <p class="text-primary font-weight-bold mt-2" style="font-size: 20px">当前RandomForest算法的参数设置</p>
              <p class="mt-2" style="font-size: 18px">criterion（分裂节点评价指标）：{{rf.criterion}}</p>
              <p style="font-size: 18px">max_depth（决策树的最大深度）：{{rf.max_depth}}</p>
              <p style="font-size: 18px">min_samples_leaf（每个节点最少叶子数）：{{rf.min_samples_leaf}}</p>
              <p style="font-size: 18px">训练图片张数：{{rf.train_num}}</p>
	<!--
              <p style="font-size: 18px">训练时间：{{rf.train_time}}</p>
              <p style="font-size: 18px">测试时间：{{rf.test_time}}</p>
	-->
              <p style="font-size: 18px">测试正确率：{{rf.rate}} （{{rf.correct}} / {{rf.total}}）</p>
              <p class="text-primary font-weight-bold mt-2" style="font-size: 20px">设置本次训练所用的参数</b>
                <div style="font-size: 18px">
                  criterion:
                  <select class="form-control" id="rf_criterion" style="width: 470px">
                    <option value="gini">Gini（Gini指数）</option>
                    <option value="entropy">Entropy（信息增益）</option>
                  </select>
                </div>
                <div class="mt-2" style="margin-right: 45%; font-size: 18px">max_depth:<input class="form-control"
                    id="rf_max_depth" value={{rf.max_depth}}></div>
                <div class="mt-2" style="margin-right: 45%; font-size: 18px">min_samples_leaf:<input
                    class="form-control" id="rf_min_samples_leaf" value={{rf.min_samples_leaf}}></div>
                <button class="btn btn-success mt-2" onclick="do_RF()">开始训练</button>
            </div>
            <div id="div_wait"><img style="width: 100px;height:100px;" src="static/common/image/wait.gif" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>